<form [nzLayout]="'inline'" nz-form class="ant-advanced-search-form">
  <nz-form-item *ngIf="!this.currentUser.siteId">
    <nz-form-label>{{l('start_site')}}</nz-form-label>
    <nz-form-control>
      <nz-select name="select-1" [(ngModel)]="siteId" [ngModelOptions]="{standalone: true}"
      (ngModelChange)="getPathList()"
      [nzPlaceHolder]="l('please_select_site')">
        <nz-option [nzValue]="''" [nzLabel]="l('please_select_site')"></nz-option>
        <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label>{{l('end_site')}}</nz-form-label>
    <nz-form-control>
      <nz-select name="select-1" [(ngModel)]="siteId2" [ngModelOptions]="{standalone: true}"
      (ngModelChange)="getPathList()"
      [nzPlaceHolder]="l('please_select_site')">
        <nz-option [nzValue]="''" [nzLabel]="l('please_select_site')"></nz-option>
        <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label>{{l('path_no')}}</nz-form-label>
    <nz-form-control>
      <nz-select name="routeId" [(ngModel)]="routeId">
        <nz-option nzValue="" [nzLabel]="l('pleass_select_path')"></nz-option>
        <nz-option *ngFor="let option of paths" [nzValue]="option.id" [nzLabel]="option.pathNo"></nz-option>
      </nz-select>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label>{{l('start_end_time')}}</nz-form-label>
    <nz-form-control>
      <nz-input-group>
        <nz-range-picker [(ngModel)]="theTime" nzShowTime [ngModelOptions]="{standalone: true}"></nz-range-picker>
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item class="control-area">
    <button nz-button [nzType]="'primary'" (click)="getPathAlarm()">{{l('search')}}</button>
    <button nz-button (click)="reset()">{{l('reset')}}</button>
    <button nz-button (click)="exportToExcel()">{{l('export')}}</button>
  </nz-form-item>
</form>
<div *ngIf="single.length === 0">{{l('none_warn_info')}}</div>
<div *ngIf="single.length !== 0">
  <ngx-charts-bar-vertical class="alarm-chart" [view]="view" [scheme]="colorScheme" [results]="single" [gradient]="gradient"
    [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel"
    [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [barPadding]="barPadding" (select)="onSelect($event)">
  </ngx-charts-bar-vertical>
</div>
